<template>
  <div v-if="widget.type === 'grid-adv-col'" class="grid-cell"
       :class="[selected ? 'selected' : '', customClass]" :style="[colHeightStyle,gridAdvColStyle]"
       @click.stop="selectWidget(widget)">
    <template v-if="'container' === subWidget.category">
      <component :is="subWidget.type + '-widget'" :widget="subWidget" :designer="designer" :key="subWidget.id"
                 :parent-list="widget.widgetList"
                 :index-of-parent-list="swIdx" :parent-widget="widget"></component>
    </template>
    <template v-else>
      <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="designer" :key="subWidget.id"
                 :parent-list="widget.widgetList"
                 :index-of-parent-list="swIdx" :parent-widget="widget" :design-state="true"></component>
    </template>
  </div>
</template>

<script>
import i18n from "@/utils/i18n";
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import SvgIcon from '@/components/svg-icon'
import refMixinDesign from "@/components/form-designer/refMixinDesign"
import {traverseWidgetsOfContainer} from "@/utils/util";

export default {
  name: "GridAdvColItem",
  componentName: "GridAdvColItem",
  mixins: [i18n, refMixinDesign],
  inject: ['refList'],
  components: {
    ...FieldComponents,
    SvgIcon,
  },
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,

    colHeight: {
      type: String,
      default: null
    },

  },
  data() {
    return {}
  },
  computed: {
    selected() {
      return this.widget.id === this.designer.selectedId
    },

    customClass() {
      return this.widget.options.customClass || ''
    },

    colHeightStyle() {
      return !!this.colHeight ? {height: this.colHeight + 'px'} : {}
    },
    gridAdvColStyle() {
      return this.widget.options.gridAdvColStyle
    }

  },
  watch: {},
  created() {
    this.initRefList()
    // this.initLayoutProps()
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.grid-cell {
  min-height: 38px !important;
  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
  //padding: 3px;
  outline: 1px dashed #336699;
  position: relative;

  .form-widget-list {
    min-height: 28px;
    display: inline;
    flex: 1;
  }

  .drag-drop-zone {
    min-height: 28px;
  }

  .grid-col-action {
    position: absolute;
    bottom: 0;
    right: -2px;
    height: 28px;
    line-height: 28px;
    background: var(--ep-color-primary);
    z-index: 999;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .grid-col-handler {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 22px;
    line-height: 22px;
    background: var(--ep-color-primary);
    z-index: 9;

    i {
      font-size: 14px;
      font-style: normal;
      color: #fff;
      margin: 4px;
      cursor: default;
    }
  }
}

.grid-col-action, .grid-col-handler {
  :deep(.svg-icon) {
    margin-left: 0.1em;
    margin-right: 0.1em;
  }
}

</style>
